<template>
    <div class="content">
        <div v-if="!car_show">
            <div class="index-header-box" id="head">
                <div class="index-header">
                    <div @click="$router.back(-1)" class="back">
                        <van-icon name="arrow-left"/>
                    </div>
                    <div class="title">订阅管理</div>
                </div>
            </div>

            <div class="page-block">
                <div class="book-list" v-for="(item,index) in list">
                    <div class="list-header">
                        <span class="pull-left">订阅条件</span>
                        <router-link :to="{name:'userBookList',query:{id:item.id}}"><strong class="pull-left blue">（{{item.counts}}）</strong>
                        </router-link>

                        <van-icon name="delete" class="pull-right delete" @click="delBook(item.id)"/>
                        <router-link :to="{name:'userBookEdit',query:{id:item.id}}">
                            <van-icon name="edit" class="pull-right"/>
                        </router-link>


                    </div>

                    <ul class="list-body">
                        <li class="item" v-if="item.car_level">{{item.car_level}}</li>
                        <li class="item" v-if="item.car_address">{{item.car_address==1? "本地牌照":"外地牌照"}}</li>
                        <li class="item" v-if="item.year_old">{{item.year_old}}年</li>
                        <li class="item" v-if="item.go_long">{{item.go_long}}万公里</li>
                        <li class="item" v-if="item.row_amount">{{item.row_amount}}升</li>
                        <li class="item" v-if="item.car_dis">{{item.car_dis}}排放</li>
                        <li class="item" v-if="item.car_case">{{item.car_case==1? "手动挡":"自动挡"}}</li>

                        <li class="item" v-if="item.car_color">{{item.car_color}}</li>
                        <li class="item" v-if="item.seat_numb">{{item.seat_numb}}座</li>
                        <li class="item" v-if="item.oil_type">{{item.oil_type}}</li>
                        <template v-if="item.other">
                            <li class="item" v-for="i in  JSON.parse(item.other)">
                                <template v-for="i2 in labList">
                                    <template v-if="i2.id == i">
                                        {{i2.title}}
                                    </template>
                                </template>

                            </li>
                        </template>

                        <li class="item" v-if="item.car_country">{{item.car_country}}</li>

                    </ul>
                </div>
            </div>

            <div class="btn-box">
                <van-button type="info" class="btn-primary" @click="car_show=1" v-if="list.length<3">添加订阅</van-button>
            </div>
        </div>

        <SearchMore @seaData="getBackMore" @cancel="seaCancel" v-if="car_show"></SearchMore>
    </div>
</template>

<script>
    import SearchMore from '../../components/search_more'
    import {Dialog} from 'vant'

    export default {
        name: "user_book",
        components: {
            SearchMore
        },
        data() {
            return {
                car_show:this.$route.query.type||0,
                list: [],
                labList: [],
                order: [],
            }
        },
        computed: {},
        mounted: function () {
            //读取亮点配置
            let that = this;
            this.$api.car.getLable().then(res => {
                that.labList = res.data.data;
            });
            this.getBook();
        },
        methods: {
            getBackMore(data) {
                this.$api.member.addBook({data: data}).then(res => {
                    if (res.data.status === 1) {
                        Dialog.alert({
                            message: res.data.msg
                        }).then(() => {
                            this.car_show = 0;
                            this.getBook();
                        });
                    }
                });
            },
            seaCancel() {
                this.car_show = 0;
            },
            getBook() {
                this.$api.member.getBook().then(res => {
                    this.list = res.data.data;
                });
            },
            delBook(id) {
                Dialog.confirm({
                    message: "确认删除该订阅?"
                }).then(() => {
                    this.$api.member.delBook({id: id}).then(res => {
                        this.$toast(res.data.msg);
                        this.getBook();
                    });
                }).catch(() => {
                    // on cancel
                });
                ;
            }
        },
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/index.scss";
    @import "../../assets/scss/user.scss";
</style>
